<template>
	<view>
		<view class="makeorder">
			<view class="main-box">
				<view class="mytop z-margin-t-32">
					<view class="nav">
						<view @tap="change(0)" class="item" :class="current==0 ? 'active' : ''">{{ to_shop !== 2 ? '上门服务' : '' }}</view>
						<view @tap="change(1)" class="item" :class="current==1 ? 'active' : ''">{{ to_shop !== 1 ? '到店服务' : '' }}</view>
					</view>
					<view class="nav_content">
						<view class="haveaddaddress z-margin-tb-32" v-if="current==0 && address" @tap="toaddress">
							<view class="z-font-w">{{ address.province }}{{ address.city }}{{ address.district }}{{ address.area }}{{ address.address }}</view>
							<view class="addressname z-margin-t-32">
								<view class="addressname_left text_999 z-font-24">
									<view class="z-margin-r-24">{{ address.name }} {{ address.sex === 1 ? '先生' : '先生' }}</view>
									<view>{{ address.mobile }}</view>
								</view>
								<view class="addressname_right">
									<view class="z-font-24">修改地址</view>
									<!-- <van-icon name="arrow" /> -->
									<u-icon name="arrow-right" size="10"></u-icon>
								</view>
							</view>
						</view>
						<view class="haveaddaddress z-margin-tb-32" v-else-if="current==0" @tap="toaddress">
							<view class="z-flex z-padding-40">
								<image src="../../static/service/addaddress.png" class="add"></image>
								<view class="z-font-30 text_999">选择地址</view>
							</view>
						</view>
						<view class="shopaddaddress z-margin-tb-32" v-else="current==1">
							<text class="shop_name z-padding-lr-8 z-padding-tb-4 z-radius-8 z-font z-margin-r-24 z-font-24">店铺</text>
							<text class="z-font-w shop_address">{{ shop.province }}{{ shop.city }}{{ shop.district }}{{ shop.address }}</text>
						</view>
						<!-- <van-divider /> -->
						<u-divider text=""></u-divider>
						<block v-if="current==0 && skillInfo">
							<view class="z-flex-c z-margin-b-24">
								<view class="z-font-22">服务人员</view>
								<view class="z-flex-1"></view>
								<image :src="cdn(skillInfo.image)" class="avatar"></image>
								<view class="time z-font-24 z-margin-lr-24">
									{{ skillInfo.name }}
								</view>
							</view>
						</block>
						<view class="servetime z-margin-b-16" v-if="current==0" @tap="chooseTime">
							<view class="z-font-22">服务时间</view>
							<view class="time z-font-24">
								<view>{{ timeInfo.starttime | date('yyyy-mm-dd hh:MM')}}</view>
								<!-- <van-icon name="arrow" color="#999" size="24rpx" /> -->
								<u-icon name="arrow-right" size="10"></u-icon>
							</view>
						</view>
						<view class="servetime z-margin-b-16" v-else="current==1 && shop.trade_hour">
							<view class="z-font-24">营业时间</view>
							<view class="time">
								<view class="z-font-24">{{ shop.trade_hour }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="goodsinfo z-padding-24 z-radius-16 z-margin-tb-32">
					<view class="goodsinfo_top">
						<image :src="cdn(info.image)" class="goodsimg z-radius-16 z-margin-r-16" mode="aspectFill" />
						<view class="goodsinfo_top_right">
							<view class="goodsinfo_top_right_top">
								<view class="tip z-flex z-margin-r-8 z-font-18" v-if="info.type == 0">严选</view>
								<view class="z-font-w">{{ info.name }}</view>
							</view>
							<view class="tips_box" v-if="sku">
								<view class="tips_item z-font-24 text_999 z-padding-tb-8 z-padding-lr-16 z-radius-8" v-for="(item,index) in tool.split(sku.name)">
									{{ item }}
								</view>
							</view>
							<view class="goodsinfo_top_right_bottom">
								<view class="goodsinfo_top_right_bottom_left">
									<view class="goodsinfo_top_right_bottom_left_left">
										<view>￥</view>
										<view class="z-font-w">{{ price }}</view>
									</view>
								</view>
								<view class="z-flex goodsinfo_top_right_bottom_right">
									
									<image v-if="num == 1" class="jian" src="../../static/service/sub.png" mode=""></image>
									<image v-else @click="numChange(Number(num) -1)" class="jian" src="../../static/service/sub.png" mode=""></image>
									<view class="z-padding-lr-24">{{num}}</view>
									<image @click="numChange(Number(num) +1)" class="jian" src="../../static/service/add.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="z-flex-c z-margin-t-32" v-if="discount < 100">
						<view class="z-font-26">会员价</view>
						<view class="z-flex-1"></view>
						<text class="money">￥{{ tool.toFix((price * num * discount) / 100) }}</text>
						<view class="discount z-flex z-font-24 z-padding-lr-8 z-margin-l-24">{{ discount / 10 }}折</view>
					</view>
					<view class="yhq_box z-margin-tb-24" @tap="couponTap">
						<view class="yhq_box_left">
							<image src="/static/service/yhq.png" class="yhq_img" mode="" />
							<view class="z-margin-l-24 z-font-26">优惠券</view>
						</view>
						<view class="yhq_box_right" v-if="coupon">
							<view>-</view>
							<view class="money">￥{{ coupon.reduce }}</view>
						</view>
						<view class="yhq_box_right" v-else>
							<view class="z-font-24">请选择</view>
							<!-- <van-icon name="arrow" size="24rpx" /> -->
							<u-icon name="arrow-right" size="10"></u-icon>
						</view>
					</view>
					<!-- <van-divider /> -->
					<u-divider :text="false"></u-divider>
					<view class="goodsinfo_bottom">
						<view class="text_999 z-font-24">合计：</view>
						<view class="z-font-w goodsinfo_bottom_money">
							<view class="z-font-24">￥</view>
							<view class="z-font-32" v-if="coupon">{{ tool.toFix((price * num * discount) / 100 - coupon.reduce) }}</view>
							<view class="z-font-32" v-else>{{ tool.toFix((price * num * discount) / 100) }}</view>
						</view>
					</view>
				</view>
				<view class="travel-box z-margin-32 z-radius-24 z-padding-32" v-if="travel">
					<view class="travel-t z-flex-c">
						<view class="z-font-30">出行方式</view>
						<view class="z-flex-1"></view>
						<view class="travels z-flex-c">
							<view class=" travel z-flex z-margin-r-24 z-radius-8 z-font-24 text_999" :class="traveltype == 1 ? 'choosed' : ''" @tap="chooseTravel(1)">
								滴滴/出租
							</view>
							<view class="travel z-flex z-radius-8  text_999 z-font-24" :class="traveltype == 2 ? 'choosed' : ''" @tap="chooseTravel(2)">
								公交/地铁
							</view>
						</view>
					</view>
					<view class="z-font-22 text_999 z-margin-t-24" v-if="traveltype == 1">
						全程共{{ travel.distance }}公里，出租出行收取来回费用，白天起步{{ travel.cityConfig.init_price }}元，超过{{
							travel.cityConfig.init_distance
						}}公里部分每公里{{ travel.cityConfig.add_price }}元
					</view>
					<view class="z-font-22 text_999 z-margin-t-24">
						公交出行免费，当前城市{{ travel.cityConfig.bus_start }}点-{{ travel.cityConfig.bus_end }}点可选择公交地铁出行方式
					</view>
					<view class="z-flex-c z-margin-t-24">
						<view class="z-font-24">车费</view>
						<view class="z-flex-1"></view>
						<view class="z-font-24 money">¥{{ travel.distance_price }}</view>
					</view>
				</view>
				<view class="order_bz z-margin-tb-32 z-padding-24 z-radius-16">
					<view class="z-margin-b-32">订单备注</view>
					<textarea v-model="memo" class="memo" maxlength="-1" auto-height="true" placeholder="填写备注信息" />
				</view>
				<view class="z-margin-32 z-font-w" v-if="totalMoney > 0">支付方式</view>
				<view class="pay_box z-margin-tb-32 z-padding-tb-32 z-padding-lr-24 z-radius-16" @tap="changepay(0)" v-if="totalMoney > 0">
					<view class="left">
						<image src="/static/service/wx.png" class="wx_img z-margin-r-24" mode="" />
						<view>微信</view>
					</view>
					<image src="../../static/login/choose.png" v-if="paytype != 0" class="choosed_img" mode="" />
					<image src="../../static/login/choosed.png" v-else class="choosed_img" mode="" />
				</view>
				<view class="pay_box z-margin-tb-32 z-padding-tb-32 z-padding-lr-24 z-radius-16" @tap="changepay(4)" v-if="totalMoney > 0">
					<view class="left">
						<image src="/static/service/balance.png" class="wx_img z-margin-r-24" mode="" />
						<view>余额</view>
						<view class="z-font-26 text_666">（当前余额：￥{{ money }}）</view>
					</view>
					<image src="../../static/login/choose.png" v-if="paytype != 4" class="choosed_img" mode="" />
					<image src="../../static/login/choosed.png" v-else class="choosed_img" mode="" />
				</view>
			</view>
			
			<view class="bottom-box" v-if="totalMoney > 0">
				<view class="levelBox z-radius-t-16 z-padding-lr-32 z-flex-c text_999" @tap="level" v-if="userInfo.is_plus === 0">
					<image src="../../static/service/level.png" class="icon"></image>
					<view class="level-info z-font-22 z-flex-1">开通会员下单，立即享受更多折扣</view>
					<view class="z-font-22 z-margin-r-16">立即开通</view>
					<!-- <van-icon name="arrow" /> -->
					<u-icon name="arrow-right" size="10"></u-icon>
				</view>
				<view class="order_bottom z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
					<view class="z-flex-c">
						<view class="text_999">总计：</view>
						<view class="order_bottom_money">
							<view class="z-font-30">￥</view>
							<view class="z-font-w z-font-40">{{ totalMoney }}</view>
						</view>
					</view>

					<view class="order_bottom_right z-raius-24" @tap="repay">
						<!-- <van-button type="primary" size="large">立即支付</van-button> -->
						<u-button type="primary" text="立即支付" color="#07C160"></u-button>
					</view>
				</view>
			</view>
			<view class="bottom-box" v-else-if="totalMoney !== '' && ((to_shop !== 2 && current==0 && address) || (to_shop !== 1 && current==1))">
				<view class="levelBox z-radius-t-16 z-padding-lr-32 z-flex-c text_999" v-if="userInfo.is_plus === 0" @tap="level">
					<image src="../../static/service/level.png" class="icon"></image>
					<view class="level-info z-font-22 z-flex-1">开通会员下单，立即享受更多折扣</view>
					<view class="z-font-22 z-margin-r-16">立即开通</view>
					<!-- <van-icon name="arrow" /> -->
					<u-icon name="arrow-right" size="10"></u-icon>
				</view>

				<view class="order_bottom z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
					<view class="z-flex-c">
						<view class="text_999">免支付</view>
					</view>

					<view class="order_bottom_right z-raius-24" @tap="repay">
						<!-- <van-button type="primary" size="large">立即预约</van-button> -->
						<u-button type="primary" text="立即预约" color="#07C160"></u-button>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" mode="bottom" @close="onClose">
		    <view class="time-box">
		      <view class="z-font-32 z-padding-24 z-text-c">选择服务时间</view>
		      <view class="z-flex-x-s-a z-marigin-32">
		        <block v-for="(item,index) in dayTime">
		          <view class="z-flex-1 z-flex-y-c" :class="index == day ?  'today' : ''" @tap="changeDay(index)">
		            <view class="day-t z-font-30">{{item.day}}</view>
		            <view class="day-b z-font-22">{{item.time}}</view>
		          </view>
		        </block>
		
		      </view>
		      <view class="times-box  z-padding-32">
		        <block v-for="(item,index) in list">
		          <block v-if="skill_id">
		            <view v-if="(item.starttime - now) >=0"
		              class="times  z-flex-y-c z-radius-24" :class="item.state === 1 ? 'active' : item.state === 2 ? 'disable' : item.starttime == timeInfo.starttime ? 'choosed' : ''"
		              @tap="choose(item)">
		              <view class="times-t z-font-40 z-font-w">{{item.starttime | date('hh:MM')}}</view>
		              <view class="times-b z-font-22" v-if="item.starttime == timeInfo.starttime">当前选择</view>
		              <view class="times-b z-font-22" v-else-if="item.state === 1">已预约</view>
		              <view class="times-b z-font-22" v-else-if="item.state === 2">不可预约</view>
		              <view class="times-b z-font-22" v-else>可预约</view>
		            </view>
		          </block>
		         <block v-else>
		            <view
		              v-if="(item.starttime - now) >=0 && tool.getHours(item.starttime) >= info.start_hour && tool.getHours(item.starttime) < info.end_hour"
		              class="times z-radius-24" :class="item.state === 1 ? 'active' : item.state === 2 ? 'disable' : item.starttime == timeInfo.starttime ? 'choosed' : ''"
		              @tap="choose(item)">
		              <view class="times-t z-font-40 z-font-w">{{item.starttime | date('hh:MM')}}</view>
		              <view class="times-b z-font-22" v-if="item.starttime == timeInfo.starttime">当前选择</view>
		              <view class="times-b z-font-22" v-else-if="item.state === 1">已预约</view>
		              <view class="times-b z-font-22" v-else-if="item.state === 2">不可预约</view>
		
		              <view class="times-b z-font-22" v-else>可预约</view>
		            </view>
		
		          </block>
		        </block>
		        <view v-if="day == 0 && today == 1" class="z-flex-c text_666 z-font-24 z-margin-t-72 notime">今日暂无可约时段
		        </view>
		      </view>
		      <view class="z-btn z-margin-32" @tap="onClose">确定</view>
		    </view>
		  </u-popup>
	</view>
</template>

<script>
	import http from "../../utils/http"
export default {
	data() {
		return {
			current: 0,
			    iswx: 1,
			    goods_id: '',
			    goods_sku_id: '',
			    num: '',
			    skill_id: '',
			    sku: '',
			    price: '',
			    money: '',
			    discount: '',
			    timeInfo: '',
			    coupon: '',
			    to_shop: 1,
			    paytype: 0,
			    address: '',
			    sumprice: '',
			    traveltype: 0,
			    memo: '',
			    choose_skill_type: '',
			    travel: '',
			    totalMoney: '',
			    info: '',
			    shop: '',
			    userInfo: '',
			    show: false,
			    day: 0,
			    now: new Date().getTime(),
			    dayTime: [],
			    year: '',
			    list: [],
			    shop_id: '',
			    safeBottom: `20px`,
			    today: 0,
			    skillInfo: ''
		};
	},
	onLoad(options) {
	    let now = new Date().getTime();
	   this.goods_id = options.goods_id,
	   this.goods_sku_id = options.goods_sku_id,
	   this.num = options.num,
	   this.skill_id = options.skill_id || '',
	   this.shop_id = options.shop_id || '',
	   this.dayTime = [
	     {day:'今天',time: this.util.formatTime(now,'mm-dd')},
	     {day:'明天',time: this.util.formatTime(now+86400000,'mm-dd')},
	     {day:'后天',time: this.util.formatTime(now+172800000,'mm-dd')}
	   ],
	   this.year = this.util.formatTime(now,'yyyy')
	    this.getInfo()
	  },
	methods: {
		onClose(){
		   this.show = false
		  },
		  getTotal() {
		    let travelMoney = 0,
		      couponMoney = 0;
		    if (this.travel) {
		      travelMoney = Number(this.travel.distance_price)
		    }
		    if (this.coupon) {
		      couponMoney = this.coupon.reduce
		    }
		    this.totalMoney = ((this.price * this.num ) * this.userInfo.discount / 100 - couponMoney + travelMoney).toFixed(2)
		    if(this.totalMoney == 0){
		      this.paytype = 4
		    }
		  },
		  level() {
		    this.util.skip('/service/level/level', {
		      'changePlus': (data) => {
		        this.getInfo()
		      }
		    })
		  },
		  couponTap() {
		    this.util.skip('/service/mycoup/mycoup?goods_id=' + this.goods_id + '&money=' + this.price * this.num + '&shop_id=' + this.shop_id, {
		      'selectCoupon': (data) => {
		        this.coupon = data.info
		        this.getTotal()
		      }
		    })
		  },
		  repay(){
		    if(this.current == 0 && !this.address){
		      this.util.toast('请添加地址')
		      return
		    }
		    this.pay()
		  },
		  pay() {
		    let data = {
		      goods_id: this.goods_id,
		      goods_sku_id: this.goods_sku_id,
		      traveltype: this.traveltype,
		      choose_skill_type: this.info.choose_skill_type,
		      to_shop: this.current == 1 ? 'shop' : 'door',
		      address_id: this.address ? this.address.id : '',
		      coupon_id: this.coupon ? this.coupon.id : '',
		      skill_id: this.current == 1 ? '' :this.skill_id,
		      shop_id: this.shop_id,
		      paytype: this.paytype,
		      time_id: this.skill_id ? this.timeInfo.id : '',
		      num: this.num,
		      memo: this.memo,
		      travel_price: this.travel ? this.travel.distance_price : 0,
		      distance: this.travel ? this.travel.distance : 0,
		      starttime: this.timeInfo.starttime,
		      city: this.current == 1 ? this.shop.city : this.address.city
		    }
		
		    http.post('order/createorder', data, true).then(res => {
		      if (this.paytype == 4) {
		        uni.redirectTo({
		          url: '/service/result/result?type=1'
		        })
		      } else {
		        uni.requestPayment({
		          timeStamp: res.data.pay.timeStamp,
		          nonceStr: res.data.pay.nonceStr,
		          package: res.data.pay.package,
		          signType: res.data.pay.signType,
		          paySign: res.data.pay.paySign,
		          success: (res) => {
		            uni.redirectTo({
		              url: '/service/result/result?type=1'
		            })
		          },
		          fail: (res) => {
		            uni.redirectTo({
		              url: '/service/myorder/myorder?type=1&active=1'
		            })
		          }
		        })
		      }
		    })
		  },
		  // setMemo(e) {
		  //   this.memo = e.detail.value
		  // },
		  numChange(e) {
		    this.num = e
		    this.getTotal()
		  },
		  changepay(e) {
		    this.paytype = e
		  },
		  change(e) {
		    if (e == 1 && this.to_shop === 1) {
		      return
		    } else if (e == 0 && this.to_shop === 2) {
		      return
		    }
		    this.current = Number(e)
		    this.getTravel()
		
		  },
		  //跳转地址管理
		  toaddress() {
		    this.util.skip('/service/addressmanager/addressmanager?type=1', {
		      selectAddress: (data) => {
		        this.address = data
		        this.getTravel()
		      }
		    })
		  },
		  change1() {
		    this.myclass = 'item ',
		    this.myclass1 = 'item active',
		    this.current = 1
		  },
		  choose(e){
		    let time = e
		    this.timeInfo = {
		        starttime: time.starttime,
		        id: time.id
		      }
		    this.getTravel()
		  },
		  chooseTime(){
		    this.show = true
		  },
		  chooseTravel(e){
		    this.traveltype = Number(e)
		    this.getTravel()
		  },
		  changeDay(e){
			  console.log(1111111111,e)
		    this.day = Number(e)
		    this.list = []
		    this.getTime()
		  },
		  getTime(){
		    if(this.skill_id){
		      http.get('skill/skilltime',{
		        timetype: this.day,
		        skill_id: this.skill_id
		      }).then(res => {
		        this.list = res.data
		      })
		    }else{
		      let day = this.year+'-'+this.dayTime[this.day].time + ' 00:00:00'
		      let start = new Date(day).getTime()/1000
		      let end = start + 24*60*60 -1
		      for(let i = start; i < end; i += 1800){
		        this.list.push({
		          starttime: i,
		          state: 0,
		          id: i
		        })
		      }
		      this.list = this.list
		    }
		    
		  },
		  getInfo() {
		    let data = {
		      goods_id: this.goods_id,
		      goods_sku_id: this.goods_sku_id,
		      num: this.num
		    }
		    if (this.skill_id) {
		      data['skill_id'] = this.skill_id
		    }
		    http.get('order/settle', data).then(res => {
		      let timeInfo;
		      if(this.skill_id){
		        timeInfo = res.data.timeInfo
		        this.now = (new Date().getTime()+30*60*1000)/1000
		      }else {
		        let time = new Date().getTime() + res.data.settle.goods.response_hour*60*60*1000 - 1*60*1000;
		        let date = new Date(time);
		        let d = date.getDate();
		        let h = date.getHours();
		        let m = date.getMinutes();
		        date.setSeconds(0)
		        if(m<=30){
		          date.setMinutes(30)
		        }else if(m > 30){
		          date.setMinutes(0)
		          date.setHours(h+1)
		          
		        }
		        if(date.getHours()>=res.data.settle.goods.end_hour){
		          date.setDate(d+1)
		          date.setHours(res.data.settle.goods.start_hour)
		          date.setMinutes(0)
		          this.day = 1,
		          this.today = 1
		        }else if(date.getHours()<res.data.settle.goods.start_hour){
		          date.setHours(res.data.settle.goods.start_hour)
		          date.setMinutes(0)
		        }
		        
		        this.now = Date.parse(date)/1000
		        timeInfo={
		          starttime: Date.parse(date)/1000,
		          id: ''
		        }
		      }
		        this.skillInfo = res.data.skillInfo,
		        this.info = res.data.settle.goods,
		        this.shop = res.data.settle.shop,
		        this.traveltype = res.data.settle.goods.is_travel,
		        this.sku = res.data.settle.goodsSku,
		        this.price = res.data.settle.goods.price,
		        this.money = res.data.money,
		        this.userInfo = res.data.userInfo,
		        this.discount = res.data.userInfo.discount,
		        this.timeInfo = timeInfo,
		        this.choose_skill_type = res.data.settle.goods.choose_skill_type
			  
		      if (this.info.to_shop.split(',').indexOf('door') !== -1 && this.info.to_shop.split(',').indexOf('shop') !== -1) {
		        this.to_shop = 3,
		        this.current = 0
		      } else if (this.info.to_shop.split(',').indexOf('door') !== -1) {
		       this.to_shop = 1,
		       this.current = 0
		      } else if (this.info.to_shop.split(',').indexOf('shop') !== -1) {
		        this.to_shop = 2,
		        this.current = 1
		      }
		      this.getTotal()
		      this.getTime()
		      if (this.to_shop === 1 || this.to_shop === 3) {
		        http.get('address/addresslist', {
		          page: 1,
		        }).then(res => {
		          this.address = res.data[0]
		          this.getTravel()
		        })
		      }
		    })
		  },
		  getTravel() {
		    if (this.address && this.choose_skill_type === 1 && this.skill_id && this.current === 0) {
		      if (this.info.is_travel == 1) {
		        http.get('order/travelprice', {
		          goods_id: this.goods_id,
		          time_id: this.timeInfo.id,
		          city: this.address.city,
		          address_id: this.address.id,
		          skill_id: this.skill_id,
		          traveltype: this.traveltype
		        }).then(res => {
		
		          this.travel = res.data
		          this.getTotal()
		        }).catch(err => {
		          this.traveltype = 1
		        })
		      }
		
		    } else {
		      this.travel = ''
		      this.getTotal()
		    }
		  },
	}
};
</script>

<style lang="scss">
	page {
		background-color: #EDF1F4;
	}
	.mytop{
	  display: flex;
	  align-items: center;
	  flex-direction: column;
	  justify-content: center;
	}
	.nav{
	  display: flex;
	  width: 686rpx;
	  align-items: flex-end;
	  border-radius: 15rpx;
	}
	
	.nav .item{
	  text-align: center;
	  line-height: 80rpx;
	  flex: 1;
	  height: 80rpx;
	  background: #F6F8FA;
	  border-radius: 15rpx 15rpx 0 0;
	  position: relative;
	  list-style: none;
	}
	.nav .item.active{
	  height: 90rpx;
	  background: #FFFFFF;
	  line-height: 90rpx;
	  font-weight: bold;
	}
	.nav .item:first-child:before{
	  content: '';
	  display: none;
	  width: 20rpx;
	  height: 100%;
	  background: #FFFFFF;
	  position: absolute;
	  right: -10rpx;
	  top: 0;
	  z-index: 10;
	  border-radius: 0 10rpx 0 0;
	  transform: skew(10deg);
	}
	.nav .item:first-child.active:before{
	  display: block;
	}
	.nav .item:last-child:before{
	  content: '';
	  display: none;
	  width: 20rpx;
	  height: 100%;
	  background: #fff;
	  position: absolute;
	  left: -10rpx;
	  top: 0;
	  z-index: 10;
	  border-radius: 10rpx 0 0 0;
	  transform: skew(-10deg);
	}
	.nav .item:last-child.active:before{
	  display: block;
	}
	.nav_content{
	  background-color: #fff;
	  width: 686rpx;
	  box-sizing: border-box;
	  padding: 20rpx;
	  border-radius: 0 0 15rpx 15rpx ;
	}
	.plus{
	  width: 32rpx;
	  height: 32rpx;
	}
	.addaddress{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.addressname{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.addressname_left{
	  display: flex;
	}
	.addressname_right{
	  display: flex;
	  color: $uni-maingreencolor;
	}
	.shop_address{
	  flex: 1;
	  line-height: 40rpx;
	}
	.shop_name{
	  background-color: #6116FF;
	  color: #fff;
	}
	.avatar{
	  width: 60rpx;
	  height: 60rpx;
	  border-radius: 50%;
	}
	.servetime{
	  display: flex;
	  justify-content: space-between;
	}
	.time{
	  display: flex;
	  align-items: center;
	}
	.goodsinfo{
	  width: 686rpx;
	  margin: 0 auto;
	  background-color: #fff;
	  box-sizing: border-box;
	}
	.goodsimg{
	  width: 180rpx;
	  height: 180rpx;
	  
	}
	.goodsinfo_top{
	  display: flex;
	  align-items: center;
	}
	.goodsinfo_top_right{
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  height: 180rpx;
	  width: calc(686rpx - 180rpx);
	  justify-content: space-between;
	}
	.goodsinfo_top_right_top{
	  display: flex;
	  align-items: center;
	}
	.tip{
	  color: #F7C566;
	  background-color: #1C274C;
	  width: 48rpx;
	  height: 28rpx;
	  border-radius: 4rpx;
	  flex-shrink: 0;
	}
	.tips_box{
	  display: flex;
	  flex-wrap: wrap;
	}
	.tips_item{
	  display: flex;
	  background-color: #F5F7F9;
	}
	.tips_item:nth-child(n+2){
	  margin-left: 20rpx;
	}
	.goodsinfo_top_right_bottom{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.goodsinfo_top_right_bottom_left{
	  display: flex;
	  align-items: flex-end;
	}
	.goodsinfo_top_right_bottom_left_left{
	  display: flex;
	  color:$uni-mainmoneycolor;
	}
	.van-stepper--round .van-stepper__minus {
	  background-color: #62CB81 !important;
	  color: #fff !important;
	  border: 1px solid #fff !important;
	}
	.van-stepper--round .van-stepper__plus {
	  background-color: #62CB81 !important;
	  color: #fff;
	}
	.yhq_box{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.yhq_box_left{
	  display: flex;
	  align-items: center;
	}
	.yhq_img{
	  width: 30rpx;
	  height: 26rpx;
	}
	.yhq_box_right{
	  display: flex;
	  align-items: center;
	  color: #A4A9B7;
	}
	.money{
	  color:$uni-mainmoneycolor;
	}
	.memo{
	  font-size: 28rpx;
	}
	
	.goodsinfo_bottom{
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
	}
	.goodsinfo_bottom_money{
	  display: flex;
	  align-items: center;
	}
	.order_bz{
	  width: 686rpx;
	  margin:  0rpx auto;
	  background-color: #fff;
	  box-sizing: border-box;
	}
	.wx_img{
	  width: 40rpx;
	  height: 40rpx;
	}
	.left{
	  display: flex;
	  align-items: center;
	}
	.pay_box{
	  width: 686rpx;
	  margin: 0 auto;
	  background: #fff;
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.right{
	  width: 32rpx;
	  height: 32rpx;
	  border: 1rpx solid #999;
	  border-radius: 50%;
	}
	.choosed_img{
	  width: 32rpx;
	  height: 32rpx;
	}
	.bottom{
	  flex-shrink: 0;
	}
	.order_bottom{
	  width: 100vw;
	  height: 150rpx;
	  background-color: #fff;
	  display: flex;
	  align-items: center;
	  box-sizing: border-box;
	  justify-content: space-between;
	  
	}
	
	.order_bottom_money{
	  display: flex;
	  align-items: center;
	  color: $uni-mainmoneycolor;
	}
	.order_bottom_right{
	  width: 400rpx;
	}
	
	.add{
	  width: 32rpx;
	  height: 32rpx;
	}
	.makeorder{
	  height: 100vh;
	  /* #ifdef H5 */
	  height: calc(100vh - 90rpx);
	  /* #endif */
	  display: flex;
	  flex-direction: column;
	}
	.main-box{
	  overflow: auto;
	  flex: 1;
	}
	.main-box::-webkit-scrollbar{
	  display: none;
	}
	.levelBox{
	  background: #1C274C;
	  height: 70rpx;
	}
	.icon{
	  width: 30rpx;
	  height: 30rpx;
	}
	.level-info{
	  color: #F7C566;
	}
	
	.travel-box{
	  background: #fff;
	}
	.travel{
	  width: 144rpx;
	  height: 56rpx;
	  background: #EDEEF1;
	}
	
	.choosed{
	  background: #62CB81;
	  color: #fff;
	}
	
	
	
	.day-t,.day-b{
	  color: #A4A9B7;
	}
	.today .day-t,.today .day-b{
	  color: #1C274C;
	}
	
	.times-box{
	  height: 550rpx;
	  overflow-y: auto;
	}
	
	.times{
	width: 154rpx;
	height: 130rpx;
	justify-content: center;
	margin-right: 23rpx;
	background: #F5F7F9;
	margin-bottom: 24rpx;
	display: inline-block;
	}
	.times:nth-of-type(4n){
	  margin-right: 0;
	}
	
	.times-b{
	  color: #62CB81;
	}
	.active{
	  background-color: #FFF7EB;
	}
	.active .times-t,.active .times-b{
	  color: #FFC675;
	}
	
	.disable .times-t,.disable .times-b{
	  color: #A4A9B7;
	}
	.times-t,.times-b{
	  text-align: center;
	  margin-top: 10rpx;
	}
	
	
	.choosed{
	  background: #62CB81;
	}
	.choosed .times-t,.choosed .times-b{
	  color: #fff;
	}
	
	
	.discount{
	  height: 32rpx;
	  background: #2C2B31;
	  color: #F6E0B9;
	  border-radius: 5rpx;
	}
	
	.notime{
	  margin: 0 auto;
	}
	.jian {
		width: 32rpx;
		height: 32rpx;
	}
	
	.time-box {
		background-color: #FFFFFF;
	}
</style>
